import React, { useState } from 'react';
import Head from 'next/head';
import VoiceInput from '../components/VoiceInput';
import TextInput from '../components/TextInput';
import HistoryRecord, { HistoryItem } from '../components/HistoryRecord';
import styles from '../styles/Home.module.css';

export default function Home() {
  const [recognizedText, setRecognizedText] = useState('');
  const [selectedHistory, setSelectedHistory] = useState<HistoryItem | null>(null);
  
  // 处理语音识别结果
  const handleRecognitionResult = (text: string) => {
    setRecognizedText(text);
  };
  
  // 处理历史记录选择
  const handleSelectHistory = (item: HistoryItem) => {
    setSelectedHistory(item);
    
    // 如果是语音输入，设置识别结果
    if (item.type === 'voice') {
      setRecognizedText(item.userInput);
    }
    
    // 滚动到页面顶部
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  
  return (
    <div className={styles.main}>
      <Head>
        <title>大模型语音交互</title>
        <meta name="description" content="大模型语音交互前端应用" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      
      <header className={styles.header}>
        <h1 className={styles.title}>大模型语音交互</h1>
        <p className={styles.description}>
          通过语音与大模型交互，支持语音输入和语音输出
        </p>
        <p className={styles.description} style={{ color: 'var(--secondary-color)', marginTop: '10px' }}>
          当前处于模拟模式，无需后端API
        </p>
      </header>
      
      <div className={`container ${styles.interactionContainer}`}>
        {/* 语音输入部分 */}
        <VoiceInput 
          onRecognitionResult={handleRecognitionResult} 
          useMockApi={true}
          selectedHistory={selectedHistory && selectedHistory.type === 'voice' ? selectedHistory : null}
        />
        
        {/* 显示识别结果 */}
        {recognizedText && (
          <div className={styles.resultContainer}>
            <h3 className="mb-4">语音识别结果:</h3>
            <p>{recognizedText}</p>
          </div>
        )}
        
        {/* 文本输入部分 */}
        <TextInput 
          useMockApi={true}
          selectedHistory={selectedHistory && selectedHistory.type === 'text' ? selectedHistory : null}
        />
        
        {/* 历史记录部分 */}
        <HistoryRecord onSelectHistory={handleSelectHistory} />
      </div>
    </div>
  );
} 